export { createVueApp }

import { createSSRApp, h, shallowRef } from 'vue'
import { setPageContext } from '../pina/usePageContext'
import { setData } from '../pina/useData'
import Layout from '../layout/Layout.vue'
import type { PageContext } from 'vike/types'
import { objectAssign } from '../utils/utils'
import { createPinia } from "pinia";
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';


function createVueApp(pageContext: PageContext) {
  const pageContextRef = shallowRef(pageContext)
  const dataRef = shallowRef(pageContext.data)
  const pageRef = shallowRef(pageContext.Page)
  const pinia = createPinia();

  const RootComponent = () => h(Layout, null, () => h(pageRef.value))
  const app = createSSRApp(RootComponent)
  app.use(pinia)
  app.use(Antd)
  setPageContext(app, pageContextRef)
  setData(app, dataRef)

  // app.changePage() is called upon navigation, see +onRenderClient.ts
  objectAssign(app, {
    changePage: (pageContext: PageContext) => {
      pageContextRef.value = pageContext
      dataRef.value = pageContext.data
      pageRef.value = pageContext.Page
    }
  })

  return app
}
